{include file='../application/index/view/default/header.html' title='个人通讯录管理' userData=$userData }

<script>
	$(function () {
		$('#addBtn').on('click', function () {
			$('.add').removeClass('none');
			$('.edit').addClass('none');
		})
		$('.editBtn').on('click', function () {
			$('.add').addClass('none');
			$('.edit').removeClass('none')
		})
		$('.x').on('click', function () {
			$('.add').addClass('none');
			$('.edit').addClass('none');
		})
	})
</script>

<style>
	ul,
	ul li {
		padding: 0;
		margin: 0;
	}

	.breadcrumb {
		height: 45px;
		width: 140px;
		display: inline-block;
		background: #2ebaae;
		text-align: center;
		line-height: 45px;
		margin-bottom: 20px;
		border-radius: 4px;
		color: #fff;
	}

	.breadcrumb:hover {
		color: #fff !important;
	}

	.title ul li {
		float: left;
	}

	.title ul {
		border-bottom: 2px solid #2ebaae;
		padding: 10px;
		width: 100%;
		line-height: 28px;
	}

	.content .list:nth-child(odd) {
		background: rgba(160, 160, 160, 0.075);
	}

	.content .list ul li {
		float: left;
	}

	.content .list ul {
		padding: 10px;
		line-height: 28px;
		font-size: 15px;
		border-bottom: solid 1px rgba(160, 160, 160, 0.3);
	}

	.content .list ul li:nth-child(1),
	.title ul li:nth-child(1) {
		width: 8%
	}

	.content .list ul li:nth-child(2),
	.title ul li:nth-child(2) {
		width: 12%
	}

	.content .list ul li:nth-child(3),
	.title ul li:nth-child(3) {
		width: 18%
	}

	.content .list ul li:nth-child(4),
	.title ul li:nth-child(4) {
		width: 25%
	}

	.content .list ul li:nth-child(5),
	.title ul li:nth-child(5) {
		width: 25%
	}

	.content .list ul li:nth-child(6),
	.title ul li:nth-child(6) {
		width: 12%
	}

	.add,.edit{
		position: fixed;
		width: 93%;
		top: 13%;
		background: #fff;
		padding: 4%;
		margin-left: -6%;
	}

	.add h3,.edit h3{
		font-size: 22px;
	}

	.add li,.edit li{
		margin-bottom: 15px;
	}

	span.label {
		width: 5%;
		float: left;
		line-height: 44px;
		height: 44px;
	}

	.add input,.edit input{
		width: 95%;
	}

	.add .x, .edit .x {
		position: absolute;
		top: 4%;
		right: 3%;
		width: 30px;
		height: 30px;
		background: url(/static/images/icon_gb.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

</style>
<!-- Main -->
<div id="main">

	<!-- Post -->

	<article class="post clearfix">

		<div>
			<a href="#" id="addBtn" class="breadcrumb">新建联系人</a>
		</div>
		<div class="title clearfix">
			<ul class="clearfix">
				<li>姓名</li>
				<li>电话</li>
				<li>邮箱</li>
				<li>地址</li>
				<li>备注</li>
				<li>操作</li>
			</ul>
		</div>


		<div class="content clearfix">
			<ul>
				<?php foreach($contactsList as $contacts){ ?>
				<li class="list clearfix">
					<ul class="clearfix">
						<li title="{$contacts.name}" >{$contacts.name}</li>
						<li title="{$contacts.tel}" >{$contacts.tel}</li>
						<li title="{$contacts.email}" >{$contacts.email}</li>
						<li title="{$contacts.addr}" >{$contacts.addr}</li>
						<li title="{$contacts.msg}" >{$contacts.msg}</li>
						
						<li>
							<a href="/index/contacts/edit?tid={$contacts.tid}" class="editContacts editBtn" id="editBtn" data-id="{$contacts.tid}">编辑</a>
							<a href="#" class="deleteContacts" data-id="{$contacts.tid}">删除</a>
						</li>
					</ul>
				</li>
				<?php }?>
			</ul>
		</div>


	</article>

	<div class="add none">
		<h3 class="title">新建联系人</h3>
		<ul>
			<li>
				<span class="label">姓名</span>
				<input type="text" class="aname" value="">
			</li>
			<li>
				<span class="label">电话</span>
				<input type="text" class="atel" value="">
			</li>
			<li>
				<span class="label">邮箱</span>
				<input type="text" class="aemail" value="">
			</li>
			<li>
				<span class="label">地址</span>
				<input type="text" class="aaddr" value="">
			</li>
			<li>
				<span class="label">备注</span>
				<input type="text" class="amsg" value="">
			</li>
			<li>
				<button class="addC" style="    margin: 15px 0;" >新建</button>
			</li>
		</ul>
		<i class="x"></i>
	</div>



</div>



</div>

<!-- Scripts -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/skel.min.js"></script>
<script src="/static/js/util.js"></script>
<!--[if lte IE 8]><script src="/static/js/ie/respond.min.js"></script><![endif]-->
<script src="/static/js/main.js"></script>

<script>
	$(function(){
		$('.addC').on('click',function(){
            $.ajax({
                type:'POST',
                url:'contacts/add',
                dataType:'json',
                data:{'aname':$('.aname').val(),'atel':$('.atel').val(),'aemail':$('.aemail').val(),'aaddr':$('.aaddr').val(),'amsg':$('.amsg').val()},
                success:function(data){
                    alert(data.msg);
                    if(!data.code){
                        window.location.href="/index/contacts";
                    }
                }
            });
        });


		 $('.deleteContacts').on('click',function(){
            $.ajax({
                type:'POST',
                url:'contacts/delete',
                dataType:'json',
                data:{'tid':$(this).data('id')},
                success:function(data){
                    alert(data.msg);
                    console.log(data);
                    if(!data.code){
                        window.location.reload();
                    }
                }
            });
        });



	})
</script>

</body>

</html>